iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
Software Development

30天!玩轉TypeScript開發書單系統系列 第 3

 [Day03] 可愛吧!TypeScript 的接口 - Interface

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20230722/20124462Uy2sEFF7Ol.png


另人心動的特性


讓我們來談談幾個特性
這些特性在PHP中可能不太常見或不太被熟知

親愛的讀者大大們,請記得要留意哦!


介面(Interface)


這是我最喜歡的特性之一
它非常簡單明瞭
允許我們在程式碼的早期階段就定義好物件的key對應的type

interface CuteMonster {
    name: string;
    eyes: number;
    color?: string;
}

const pinkMonster: CuteMonster = {
    name: 'Mini',
    eyes: 3,
    color: 'pink'
};

我們使用介面 Interface創造了可愛怪獸的藍圖
color?: string;部分表示該屬性是可選的

短短幾行程式碼就可以創造出各種不同顏色的可愛生物或物件
是不是相當簡單呢?^_^


類型(Type)


Type(類型) 和 Interface(介面) 用法確實相似
但它們有一些重要的區別

在實際使用中
通常的慣例是可以創建自定義的單一類型別的別名用在 type 上
而用 interface 來描述物件

這個慣例有助於提高程式碼的可讀性
使我們的程式碼更加語意化和維護


type Result = "success" | "error";
const status: Result = "success";

或是用於函數的型別別名

type BinaryOperation = (a: number, b: number) => number;
type Comparator = (a: number, b: number) => boolean;

const add: BinaryOperation = (a, b) => a + b;
const isEqual: Comparator = (a, b) => a === b;

以上就是對type的補充 ^_____^

💪下一篇,加緊腳步,已經迫不及待想要實作囉!🚀


上一篇
[Day02] 淺談吧!TypeScript的「any」類型 - PHP 工程師的啟示
下一篇
 [Day04] 就泛吧!TypeScript 的泛型 - Generics:讓你少寫扣的好方法
系列文
30天!玩轉TypeScript開發書單系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言